<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<button>点击</button>
	<script type="text/javascript">
		//防抖:把多次执行变为最后一次执行（仅将最后一次执行作为最终执行项） 延时器
		let btn = document.querySelector('button')
		let time = null
		btn.onclick = function() {
			//每次点击都把上一次的清除
			clearTimeout(time)
			time = setTimeout(() => {
				//执行代码
				console.log("帕金森")
			},1000)
		}

		//节流: 不让事件触发过于频繁,通过延时器的方式保证一段时间内只执行一次，设置时间间隔
		// let time2 = null
		// document.onmousemove = function() {
		// 	//保证1秒里只执行这一段
		// 	if (!time2) {
		// 		time2 = setTimeout(function(){
		// 			console.log("7788778")
		// 			//执行完清空
		// 			time2 = null
		// 		},1000)
		// 	}		
		// }


		//========================== 封装
		function fn(delay, action) {
			let time = null
			return function() {
					if (!time) {
					time = setTimeout(function(){
						action()
						//执行完清空
						time = null
					},delay)
				}
			}
			
		}
		//执行代码
		function demo() {
				console.log("封装-----")
		}
		let handle = fn(1000, demo)
		document.addEventListener("mousemove", function() {
			handle()
		})
	</script>
</body>
</html>